<template>
    <div>
        <el-menu  class="menu-style" active-text-color="#ffd04b"
                 :collapse-transition = "false"
                 :collapse="isCollapse"
                 :default-openeds="currentOpenMenu"
                 router>
            <div style="height:40px; width: 200px">
                <i class="el-icon-s-custom" style="font-size: 25px;
                        width: 50px;
                        position: relative;
                        right: -20px;
                        line-height: 50px
                        "></i>
                <span slot="title">FHK</span>
            </div>


            <el-menu-item index="/main" v-if="this.menusName.includes('Main')">
                <i :class="menus[menusName.indexOf('Main')].icon"></i>
                <span slot="title" style="font-size: 16px">主页</span>
            </el-menu-item>


            <el-submenu index="" v-if="menusName.includes('SystemMenu')">
                <template slot="title" style="font-size: 16px">
                    <i :class="menus[menusName.indexOf('SystemMenu')].icon"></i>
                    <span slot="title" style="font-size: 16px">系统管理</span>
                </template>
                <el-menu-item-group style="font-size: 16px">
                    <el-menu-item index="/user" style="font-size: 16px" v-if="menusName.includes('User')">
                        <i :class="menus[menusName.indexOf('User')].icon"></i>用户管理
                    </el-menu-item>
                    <el-menu-item index="/role" style="font-size: 16px" v-if="menusName.includes('Role')">
                        <i :class="menus[menusName.indexOf('Role')].icon"></i>角色管理
                    </el-menu-item>
                    <el-menu-item index="/menu" style="font-size: 16px" v-if="menusName.includes('Menu')">
                        <i :class="menus[menusName.indexOf('Menu')].icon"></i>菜单管理
                    </el-menu-item>
                    <el-menu-item index="/fileManager" style="font-size: 16px" v-if="menusName.includes('File')">
                        <i :class="menus[menusName.indexOf('File')].icon"></i>文件管理
                    </el-menu-item>
                    <el-menu-item index="/course" style="font-size: 16px" v-if="menusName.includes('Course')">
                        <i :class="menus[menusName.indexOf('Course')].icon"></i>课程管理
                    </el-menu-item>
                    <el-menu-item index="/selectCourse" style="font-size: 16px" v-if="menusName.includes('SelectCourse')">
                        <i :class="menus[menusName.indexOf('SelectCourse')].icon"></i>选课管理
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>

        </el-menu>
    </div>
</template>

<script>
    export default {
        name: "Aside",
        props:{
            isCollapse: Boolean,
        },
        data(){
            return{
                menusName:[],
                menus:JSON.parse(localStorage.getItem("user")).menus,
                currentOpenMenu:[],
                currentIconState:false,
            }
        },
        created() {
            this.getMenus();
        },
        mounted() {
        },
        methods:{
           getMenus(){
               var user= JSON.parse(localStorage.getItem("user"));
               this.menusName=user.menus.map(v=>v.name);
               this.menus=user.menus;
               if (this.menusName.includes('User')||
                   this.menusName.includes('Role')||
                   this.menusName.includes('Menu')||
                   this.menusName.includes('File')) this.currentOpenMenu.push("");
           },
        },
    }
</script>

<style scoped>
    .menu-style{
        height: 100vh;
        background-color: rgb(48,65,86);
        color: white;
        overflow-x: hidden;
    }

    .el-menu-item{
        background-color: rgb(48,65,86);
        color: white;
    }

    /deep/ .el-submenu__title{
        background-color: rgb(48,65,86);
        color: white;

    }


    /deep/ .el-menu-item-group__title{
        background-color: rgb(48,65,86);
        color: gray;
    }
</style>
